<template>
  <div>
    <van-nav-bar title="砍价列表" left-arrow @click-left="onClickLeft" />

    <div class="content">
      <div class="content-item" v-for="(item,index) in popularityList.slice(21,31)" :key="index">
        <img :src="item.pic" />

        <div class="right">
          <p class="p1">{{item.name}}</p>
          <p class="p2">{{item.characteristic}}</p>
           <div class="right-con">
                    <div><p style="color:red;">￥{{item.minPrice}}</p>
                    <p>低价</p></div>
                         
                    <div><p>￥{{item.originalPrice}}</p>
                    <p>原价</p></div> 
                         
                    <div><p>{{item.stores}}件</p>
                    <p>限量</p></div>
                         
                  </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    popularityList: function () {
      return this.$store.state.homeStore.bargainirg;
    },
  },
  mounted() {},
  methods: {
    onClickLeft() {
        window.history.back()
    },
  },
};
</script>

<style scoped>
.content{
    width: 100%;
}
.content-item{
    display: flex;
    border-top: 1px solid #eee;
    padding: 0.14rem;
    border:1px solid blue;
}
.content-item img{
    width: 2.1rem;
    height: 2.1rem;
}
.right{
    flex: 1;
    margin-left: 0.14rem;
    border:1px solid yellow;
}
p{
    margin: 0px;
    padding: 0px;
}
.p1{
    font-size: .2rem;
}
.p2{
    font-size: 0.15rem;
    color: #b2b2b2;
    margin-top: .1rem;
}
.right-con{
    width: 3rem;
    display:inline-flex;
    justify-content: space-around;
    flex-wrap: wrap;
    border:1px solid red;
}
.right-con div{
    width: 1rem;
    height: 100%;
    margin-top: 0.2rem;
    
}
.right-con div p{
    font-size:0.2rem;
}
</style>